<style lang="scss" scoped>
    .add-top{
        position: relative;
        height:40px;
        font-size:28px;
        margin-top: 36px;
        color:rgba(48,54,65,1);
        line-height:40px;
        text-align: left;
        padding-left: 50px;
        box-sizing: border-box;
    }

    .add-cancel-btn{
        position: absolute;
        width:80px;
        height:37px;
        font-size:12px;
        background:rgba(255,255,255,1);
        border-radius:5px;
        border:1px solid rgba(151,151,151,1);
        right: 0; top: 50%;
        transform: translateY(-50%);
        outline: none;
        color: #303641;
        cursor: pointer;
    }

    .add-line{
        height: 2px;
        margin: 18px 0 0 0;
        background: #979797;
    }

    .x-label{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        margin: 30px 0 10px 0;
        text-align: left;
    }

    .scan-wrap{
        position: relative;
        margin: 0 50px;
    }

    .add-block{
        position: relative;
        height: 82px;
        margin: 0 50px;
        border-bottom: 1px solid #E5E5E5;
    }

    .add-block-label{
        position: absolute;
        height:22px;
        font-size:16px;
        color:rgba(245,166,35,1);
        line-height:22px;
        top: 50%; transform: translateY(-50%);
    }

    .cancel-btn{
        position: absolute;
        right: 0;
        top: 50%; transform: translateY(-50%);
        width:100px;
        height:38px;
        background:rgba(230,67,64,1);
        border-radius:5px;
        color: #fff;
    }

    .scan-top-box{
        position: relative;
        width: 690px;
        height:74px;
        font-size:26px;
        color:rgba(48,54,65,1);
        line-height:37px;
        margin: 0 50px;
        margin-top: 59px;
    }

    .wx-code{
        position: relative;
        width: 320px; height: 320px;
        margin: 30px auto;
    }

    .wx-desc{
        display: block;
        height:37px;
        font-size:26px;
        color:rgba(136,136,136,1);
        line-height:37px;
        margin-top: 100px;
        margin-bottom: 102px;
        text-decoration: none;
    }

    .wx-update-btn{
        position: absolute;
        right: 0; top: 50%;
        transform: translateY(-50%);
        /*width:60px;*/
        height:38px;
        background:rgba(255,255,255,1);
        border-radius:5px;
        border:1px solid rgba(151,151,151,1);
        font-size:14px;
        color:rgba(48,54,65,1);
        text-align: center;
        line-height: 38px;
    }

    .green{
        color: #39B866;
    }

    .wx-code-success{
        position: absolute;
        width: 100px; height: 100px;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }

    .wx-code-error{
        position: absolute;
        width: 186px; height: 186px;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }

    .wx-bind-error{
        text-align: center;
        height:56px;
        font-size:40px;
        color:rgba(255,82,62,1);
        line-height:56px;
        transform: translateY(-40px);
    }

    .wx-contain{
        position: relative;
        width: 100%; height: 100%;
    }

    button{
        cursor: pointer;
    }

    .up-box{
        margin: 100px auto;
    }

    .m-mb-30{
        margin-bottom: 30px;
    }

    .up-tip{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        text-align: center;
        margin-top: 61px;
    }

    .up-submit{
        display: block;
        height:50px; width: 100%;
        background:rgba(57,184,102,1);
        border-radius:6px;
        font-size:16px;
        color: #fff;
        text-align: center; line-height: 50px;
        margin-top: 22px;
    }

    button:disabled {
        opacity: .5;
    }

    .up-cancel{
        @extend .up-submit;
        color:rgba(48,54,65,1);
        background: #fff;
        margin-bottom: 90px;
    }

    .x-manager-date{
      height: 99px;
      position: relative;
      border-bottom: 1px solid #E5E5E5;
      &>.x-label-1{
        position: absolute;
        top: 30px;
        height:22px;
        font-size:16px;
        color:rgba(0,0,0,1);
        line-height:22px;
      }
      &>.x-msg{
        position: absolute;
        top: 61px;
        height:22px;
        font-size:12px;
        color:#888;
        line-height:22px;
      }
      &>.date{
        position: absolute;
        top: 30px;
        height:22px;
        font-size:16px;
        color:#303641;
        line-height:22px;
        right: 0;
      }
    }
</style>

<template>
  <section>
    <div class="add-top">
        {{username}}
        <button class="wx-update-btn" style="right: 50px;" v-if="wxUserInfo.openid">刷新</button>
    </div>

    <div class="add-line"></div>

    <div class="add-block" v-if="!wxUserInfo.openid">
        <div class="add-block-label">等待绑定授权</div>
        <button class="cancel-btn" @click="$router.back()">取消授权</button>
        <!-- <button class="wx-update-btn" v-else>刷新</button> -->
    </div>

    <div class="add-block" v-else>
        <div class="add-block-label" style="color: #303641;">正常状态</div>
    </div>
    <!--<p @click="addsubmanage" style="height: 50px;font-size: 50px">点击无需扫码直接添加</p>-->
    <div class="scan-top-box" v-if="!wxUserInfo.openid">
        让同事使用微信扫码授权，即可成为子管理员。<br/>此二维码10分钟内有效
    </div>

    <div class="scan-top-box" v-else-if="wxUserInfo.openid && registState">
        微信用户“{{wxUserInfo.nickname}}”已扫码授权，并成为“{{username}}”的子管理员
    </div>

    <div class="wx-code">
        <div class="wx-contain" id="wxDom" v-if="!wxUserInfo.openid"></div>
        <img :src="wxUserInfo.headimgurl" class="wx-code-success" v-else-if="wxUserInfo.openid && registState">
        <img src="/static/img/do_failure.png" class="wx-code-error" v-else-if="wxUserInfo.openid && !registState">
    </div>

    <a class="wx-desc" v-if="!wxUserInfo.openid">点击下载二维码图片 或 右击复制</a>

    <div class="wx-desc green" v-else-if="wxUserInfo.openid && registState">通过验证，授权成功</div>
    <template v-else-if="wxUserInfo.openid && !registState">
        <div class="wx-bind-error">绑定失败</div>
        <div class="wx-desc" >{{username}}未绑定成功</div>
    </template>


    <div class="scan-wrap">
        <x-item label="名字" :text="username"/>
        <x-item label="管理权限" :text="authStr"/>

        <div class="x-manager-date">
          <div class="x-label-1">管理期限至</div>
          <div class="x-msg">默认为商户版本到期日期</div>
          <div class="date">{{date}}</div>
        </div>

        <x-item label="职能" :text="duty"/>
    </div>
  </section>
</template>

<script>
  import {mapActions,mapState} from 'vuex'
  import URL from 'url'
  import axios from 'axios'
  export default {
    data() {
      return{
          loading: false,
          auth: '',
          duty: '',
          date: '',
          username: '',
          authObj: {
            outframe: '外框',
            infram: '内框',
            outmatcard: '外衬卡纸',
            middlematcard: '中衬卡纸',
            inmatcard: '内衬卡纸',
            agent: '微代理',
            paint: '画芯',
            order: '订单'
          },
          wxUserInfo: {},
          registState: false,
          code: ''
      }
    },
    components:{
    },
    methods: {
      ...mapActions([
          'getWxInfo',
        'updateManage',
      ]),
      getUrlParam: function () {
        var params = {};
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?");
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);
            params[name] = value
          }
        }
        return params
      },
      init () {
          this.username = ''
          this.auth = ''
          this.duty = ''
      },
      submit () {

      },
      addsubmanage(){
          var params = {
            action: 'addSubManager',
            openid: this.wxInfo.openid,
            location: this.wxInfo.city,
            usericon: this.wxInfo.headimgurl,
            username: this.username,
            name: this.wxInfo.nickname,
            type: 'submanager',
            auth: this.auth,
            duty: this.duty,
            deviceid: 'TEST-deviceid-ADD-SUBMANAGE',
          }
          this.updateManage(params)
            .then(data => {
                this.registState = true
//              this.$router.push({path:'/manager/detail',query:{id:data.result.userid}})
            })
      },
      confirmManage(code){
        this.getWxInfo({code:code})
          .then(data => {
              this.wxUserInfo = this.wxInfo
              this.addsubmanage()
        })
      },
      wxLogin (){
        localStorage.setItem('codepath','/manager/authorization')
        var obj = new WxLogin({
          id: "wxDom",
          appid: "wxe2ff3ac2028a6376",
          scope: 'snsapi_login',
          redirect_uri: window.encodeURI('http://test.shop.51artx.com/artx/shop/dist/#/')
        })
      },
    },
    computed: {
      ...mapState({
        wxInfo: state => state.login.wxInfo,
      }),
      authStr () {
        return this.auth.split(',').map(val => {
            return this.authObj[val]
        }).join(',')
      }
    },
    mounted (){
      this.username = localStorage.getItem('username')
      this.auth = localStorage.getItem('auth')
      this.duty = localStorage.getItem('duty')
      this.date = localStorage.getItem('date')
      if (this.getUrlParam()['code'] && localStorage.getItem('codepath') == '/manager/authorization') {
        this.confirmManage(this.getUrlParam()['code'])
      } else {
        this.wxLogin()
      }
    }
  }
</script>
